<template>
	<view class="map-container">
		<view class="map">
			 <liu-easy-map ref="liuEasyMap" v-if="liuEasyMap" :centerLat="centerLat" :centerLng="centerLng" :scale="12"
			            :markerData="markerData" @clickMarker="markerClick" @clickMap="clickMap"></liu-easy-map>
			<view class="number-box">
				<view class="number-item" @click="changeTab(item,index)" v-for="(item,index) in numberList" 
				:key="index" 
				:style="{background:activeTab == item.type ? '#00cc44' : '#fff',color:activeTab == item.type ?  '#fff' : '#181D21'}">
					<view class="item-left">
						<image :src="$getImageSrc(item.url)"></image>
						<text>{{item.title}}</text>
					</view>
					<text>{{item.num}}</text>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" :mask-click="false" type="bottom">
			<view class="detail-box">
				<uni-icons @click="close" class="close-icon" type="closeempty" size="25" color="#181D21"></uni-icons>
				<view class="position">
					<view class="touch">
						
					</view>
					<view class="equipment-info">
						<view class="info-left">
							<image :src="$getImageSrc('map-equipment.png')"></image>
						</view>
						<view class="info-right">
							<text>{{currInfo.name}}</text>
							<text class="id">{{currInfo.equipmentCode}}</text>
						</view>
					</view>
					<view class="status-img">
						<image :src="$getImageSrc('map-status.png')"></image>
					</view>
				</view>
				<view class="equipment-content">
					<view class="title">
						监测图片
					</view>
					<view class="img-list" v-if="snapList.length > 0">
						<view class="img-list-item" v-for="item in snapList">
							<image :src="$getImageSrc('genbu.png')" ></image>
							<view class="time">{{formatTimestamp(item.createTime)}}</view>
						</view>
					</view>
					<view class="no-data">
						暂无数据
					</view>
				</view>
				<view class="pos-detail">
					<view class="address-detail">
						<image :src="$getImageSrc('location.png')"></image>
						四川省成都市郫都区黄广路
					</view>
					<view class="detail-btn" @click="toDetail">
						查看详情
					</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import {
		equipmentPage,getPresetFile
	} from '../../untils/api.js'
	import {formatTimestamp} from '../../untils/pubic.js'
	export default {
	        data() {
	            return {
					currInfo:{},
					liuEasyMap:false,
					activeTab:'003',
					snapList:[],
					numberList:[
						{url:'map-num-1.png',type:'001',title:'虫情',num:0,bgColor:'#FFF',color:'#181D21'},
						{url:'map-num-2.png',type:'003',title:'灾情',num:0,bgColor:'#FFF',color:'#181D21'},
						{url:'map-num-3.png',type:'002',title:'苗情',num:0,bgColor:'#FFF',color:'#181D21'},
						{url:'map-num-4.png',type:'004',title:'墒情',num:0,bgColor:'#FFF',color:'#181D21'},
					],
	                markerData: [],
					centerLng:'',
					centerLat:'',
	                //展示区域点位信息
	                polygons: [{
	                    points: [], //经纬度数组
	                    strokeWidth: 2, //描边的宽度
	                    strokeColor: "#FF000060", //描边的颜色
	                    fillColor: "#FF000090" //填充颜色
	                }],
					equipmentList:[]
	            }
	        },
	        methods: {
				toDetail() {
					
				},
				changeTab(item,index) {
					console.log(item,index);
					this.activeTab = item.type
					this.liuEasyMap = false
					this.getEquipmentList(item.type)
					
				},
				close() {
					this.$refs.popup.close()
				},
				// 获取设备列表分页
				async getEquipmentList(productType) {
					uni.showLoading({
						title: '加载中'
					});
				
					try {
						const params = {
							pageNo: 1,
							pageSize: 10,
							productType: productType
						}
						const res = await equipmentPage();
						if (res.code === 200) {
							this.markerData = []
							this.numberList.forEach(item => item.num = 0)
								this.equipmentList = res.data.list;
								const currEquipment = this.equipmentList.find(item => item.productType == productType)
								if(!currEquipment || !currEquipment.positioning) {
									const currItem = this.numberList.find(item => item.type == productType)
									this.liuEasyMap = true
									uni.showToast({
										icon:'none',
										title:currItem.title + '没有数据'
									})
								} else {
									if(currEquipment.positioning) {
										this.centerLng = currEquipment.positioning.split(',')[0]
										this.centerLat = currEquipment.positioning.split(',')[1]
									}
								}
								
								this.equipmentList.map(item => {
									if(item.positioning) {
										
										const latitude = item.positioning.split(',')[1]
										const longitude = item.positioning.split(',')[0]
										let markerUrl = ''
										if(item.productType == '001') {
											markerUrl = require('../../static/image/map-num-1.png')
											this.numberList[0].num ++
										}
										if(item.productType == '002') {
											markerUrl = require('../../static/image/map-num-3.png')
											this.numberList[2].num ++
										}
										if(item.productType == '003') {
											markerUrl = require('../../static/image/map-num-2.png')
											this.numberList[1].num ++
										}
										if(item.productType == '004') {
											markerUrl = require('../../static/image/map-num-4.png')
											this.numberList[3].num ++
										}
										this.markerData.push({
											...item,
											id: item.id,
											name: item.name, //标记点展示名字
											address: item.address,
											latitude: latitude, //标记点纬度
											longitude: longitude, //标记点经度
											markerUrl: markerUrl, //标记点图标地址
											iconWidth: 32, //标记点图标宽度
											iconHeight: 32, //标记点图标高度
											calloutColor: '#ffffff', //气泡窗口 文本颜色
											calloutFontSize: 12, //气泡窗口 文本大小
											calloutBorderRadius: 4, //气泡窗口 边框圆角
											calloutPadding: 8, //气泡窗口 文本边缘留白
											calloutBgColor: '#00CC44', //气泡窗口 背景颜色
											calloutDisplay: 'ALWAYS', //气泡窗口 展示类型 默认常显 'ALWAYS' 常显 'BYCLICK' 点击显示
										})
									}
									
								})
								this.liuEasyMap = true
								console.log(this.markerData,'this.markerData');
							}
						
					} catch (err) {
						console.error('请求失败', err);
					} finally {
						uni.hideLoading();
					}
				},
	            //点击标记点
	            async markerClick(e) {
					try {
						uni.showLoading({
							title:'加载中'
						})
						this.currInfo = e
						console.log('点击标记点信息：', e)
						const res = await getPresetFile({deviceCode:e.equipmentCode,presetCode:''})
						if(res.code == 200 && res.data.length) {
							  this.snapList = res.data
						}
						uni.hideLoading()
						this.$refs.popup.open()
					} catch (error) {
						//TODO handle the exception
						uni.hideLoading()
					}
	            },
				clickMap(e) {
					console.log(e);
				}
	        },
			onLoad(options) {
				this.activeTab = options.productType
				this.getEquipmentList(options.productType)
			}
	    }
</script>

<style lang="scss" scoped>
	.no-data {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		/* 根据需要调整 */
		font-size: 16px;
		color: #999;
	}
	.map-container {
		height: 100%;
		overflow: hidden;
		overflow-y: auto;
		background: #ECEDEE;
		.map {
			height: 100vh;
			position: relative;
			.number-box {
				position: absolute;
				top: 26rpx;
				left: 0;
				height: 68rpx;
				z-index: 99;
				width: 100%;
				display: flex;
				align-items: center;
				.number-item {
					color:#181D21 ;
					background-color: #fff;
					padding:0 16rpx;
					font-weight: 400;
					font-size: 28rpx;
					width: 192rpx;
					height: 68rpx;
					border-radius: 12rpx;
					margin-right: 16rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					image {
						width: 40rpx;
						height: 40rpx;
					}
					.item-left {
						display: flex;
						align-items: center;
					}
				}
			}
		}
		.detail-box {
			overflow: hidden;
			position: relative;
			height: 1092rpx;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
			.close-icon {
				z-index: 999;
				position: absolute;
				right: 8rpx;
				top: 8rpx;
			}
			.position {
				position: relative;
				height: 170rpx;
				.touch {
					margin: 0 auto;
					margin-top: 12rpx;
					width: 56rpx;
					height: 8rpx;
					background: #000000;
					border-radius: 4rpx;
					opacity: .2;
				}
				.status-img {
					width: 140rpx;
					height: 140rpx;
					position: absolute;
					right: 40rpx;
					top: 46rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.equipment-info {
					margin-top: 36rpx;
					margin-left: 40rpx;
					display: flex;
					align-items: center;
					height: 96rpx;
					.info-left {
						margin-right: 24rpx;
						width: 96rpx;
						height: 100%;
						border-radius: 50%;
						background-color: #e7e8e9;
						display: flex;
						justify-content: center;
						align-items: center;
						image {
							width: 28rpx;
							height: 68rpx;
						}
					}
					.info-right {
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.id {
							font-weight: 400;
							font-size: 28rpx;
							color: #929496;
						}
					}
				}
			}
			.equipment-content {
				height: 780rpx;
				background: #ECEDEE;
				overflow: hidden;
				.title {
					margin: 32rpx 0 24rpx 48rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #181D21;
				}
				.img-list {
					margin-left: 48rpx;
					display: flex;
					flex-wrap: wrap;
					.img-list-item {
						width: 320rpx;
						height: 210rpx;
						margin-bottom: 24rpx;
						margin-right: 16rpx;
						image {
							width: 320rpx;
							height: 180rpx;
						}
						.time {
							font-weight: 400;
							font-size: 24rpx;
							color: #535457;
						}
					}
				}
			}
			.pos-detail {
				height: 80rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 48rpx;
				box-sizing: border-box;
				.address-detail {
					height: 24rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #535457;
					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
				.detail-btn {
					width: 192rpx;
					height: 80rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					border: 1rpx solid #00B23B;
					color: #00B23B;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>